<style scoped>
  .back {
    background-image: url("https://songtell-1251684550.cos.ap-chengdu.myqcloud.com/cdivtc/education-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .el-header {
    /*background-color: #B3C0D1;*/
    color: #333;
    text-align: left;
  }

  .el-footer {
    /*background-color: #B3C0D1;*/
    text-align: center;
  }

  .el-main {
    /*background-coloror: #E9EEF3;*/
    color: #333;
    text-align: center;
  }

  .full {
    /*height: 100%;*/
  }

  .form {
    margin-right: 80px;
    /*background-color: red;*/
  }

  .btn_width {
    width: 100%;
  }

  .cent_back {
    background-color: rgba(149, 149, 149, 0.86);
    border-radius: 10px;
  }

  #app {
    /*background-color: #3a8ee6;*/
  }

  .padding_bottom {
    padding-bottom: 80px;
    height: 490px;
  }

  .el-form-item__error {
    color: red;
  }

  .el-form-item.is-error .el-input__validateIcon {
    color: red;
  }

  .codeinput {
    margin: 0;
    padding: 0;
  }

</style>
<template>
  <div v-loading="divLoading" class="back">
    <el-container>
      <el-header height="100px">
        <img src="../assets/education-logo.png" height="100%"/>
      </el-header>
      <el-main class="padding_bottom">
        <el-row>
          <el-col :span="8">&nbsp;</el-col>

          <el-col :span="8" class="cent_back">
            <h1 style="margin-top: 55px;color:#ffffff;margin-bottom: 30px;">成果管理系统登录</h1>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px"
                     class="demo-ruleForm">
              <el-form-item prop="name" class="form">
                <el-input type="text" v-model="ruleForm.name" prefix-icon="el-icon-user-solid" placeholder="请输入学号或工号"
                          clearable></el-input>
              </el-form-item>
              <el-form-item prop="pass" class="form">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  prefix-icon="el-icon-unlock"
                  placeholder="请输入密码"
                  autocomplete="no" clearable></el-input>
              </el-form-item>
              <el-form-item prop="verify" class="form">
                <el-row :gutter="10">
                  <el-col :span="14">
                    <el-input
                      max="10"
                      type="text"
                      v-model="ruleForm.verify"
                      prefix-icon="el-icon-key"
                      placeholder="请输入验证码"
                      autocomplete="no" clearable></el-input>
                  </el-col>
                  <el-col :span="10" style="line-height: 0px;">

                    <a id="a_code" href="javascript:return false;"
                       @click="refreshCode()">
                      <img id="imgcode"
                           :src="image_src"
                           :onerror="defaultImg"
                           width="100%"
                           height="100%"
                           style="border: 0px"
                           class="codeinput el-input__inner"/>
                    </a>
                  </el-col>
                </el-row>
              </el-form-item>

              <el-form-item class="form" style="margin-top: 40px">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <!--                    <el-button class="btn_width" type="primary" @click="submitForm('ruleForm')">登录</el-button>-->
                    <el-button class="btn_width" type="primary" @click="submitForm('ruleForm')">登录
                    </el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button class="btn_width" @click="resetForm('ruleForm')">重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="8">&nbsp;</el-col>
        </el-row>
      </el-main>
      <el-footer height="90px" style="line-height: 90px;color: #ffffff">
        <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: #ffffff;text-decoration: none"> 蜀ICP备19040405号-1</a>
      </el-footer>
    </el-container>
  </div>
</template>
<script>

    export default {

        data() {
            //---------------------------验证  验证码框------------------------------
            var checkVerify = (rule, value, callback) => {

                if (!value) {
                    return callback(new Error('验证码不能为空'));
                }

                var code =  this.$cookie.get("code")+""

                if (code.toLowerCase() === value.toLowerCase()) {
                    return callback();
                } else {
                    //刷新验证码
                    this.image_src = this.URL.api + "code?" + Math.random();
                    return callback(new Error('验证码错误'));
                }
            };
            //---------------------------验证  用户名框------------------------------
            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    // if (this.ruleForm.name !== '') {
                    //     this.$refs.ruleForm.validateField('checkPass');
                    // }
                    callback();
                }
            };
            //---------------------------验证  密码框------------------------------
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                divLoading: false,
                //---------------------------登录输入框start------------------------------
                ruleForm: {
                    name: '',
                    pass: '',
                    verify: '',
                    code: '',

                },
                defaultImg: 'this.src="' + require('../assets/imgerror.png') + '"',
                image_src: this.URL.api + "code",
                self: this,
                rules: {
                    name: [
                        {validator: validateName, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    verify: [
                        {validator: checkVerify, trigger: 'blur'}
                    ]
                }
                //---------------------------登录输入框end------------------------------
            };
        },
        mounted: function () { //mounted　表示这个 Vue 对象加载成功了


        },

        methods: {
            submitForm(formName) {
                var self = this;
                //登录按钮事件
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.divLoading = true;
                        // console.log("111");
                        var username = this.ruleForm.name;
                        var password = this.ruleForm.pass;
                        console.log(username + password)
                        var data = {"username": username, "password": password};
                        self.$http.post(this.URL.api + "user/loginUser", self.qs.stringify(data))
                            .then(re => {
                                console.log(re);
                                if (re.data.flag) {

                                    document.onkeydown = undefined;

                                    localStorage.setItem("JWT_TOKEN", re.headers.authorization)
                                    localStorage.setItem("userinfo", JSON.stringify(re.data.data.user))
                                    localStorage.setItem("userrole", JSON.stringify(re.data.data.role))

                                    this.$cookie.set('userToken', re.data.message + "");
                                    console.log(re.data)
                                    this.$cookie.set('userid', re.data.data.user.uid, 10)
                                    this.$cookie.set('userToken', re.data.message + "");
                                    this.$cookie.set('userid', re.data.data.user.uid, 10)
                                    console.log(re.data.data.role[0].grades);
                                    if (re.data.data.role[0].grades >= 2000)
                                        this.$router.push({name: "TAchievements"})
                                    else{
                                        this.$router.push({name: "Achievements"})
                                    }
                                    self.divLoading = false;
                                    this.$message({
                                        showClose: true,
                                        message: '登录成功！！！',
                                        type: 'success',
                                        duration: '1000'

                                    });
                                } else {
                                    self.divLoading = false;
                                    //刷新验证码
                                    this.image_src = this.URL.api + "code?" + Math.random();
                                    this.$message({
                                        showClose: true,
                                        message: '用户名或密码错误',
                                        type: 'error',
                                        duration: '2000'
                                    });
                                }
                            });

                    } else {
                        self.divLoading = false;
                        console.log("不能为空！！！");
                    }


                });
            },
            resetForm(formName) {//重置按钮事件
                this.$refs[formName].resetFields();

            },
            refreshCode() {//refresh  verify
                console.log("verify");
                this.image_src = this.URL.api + "code?" + Math.random();
            },

        },
        created() {
            var _self = this;
            document.onkeydown = function (e) {//回车登录事件
                if (window.event == undefined) {
                    var key = e.keyCode;
                } else {
                    var key = window.event.keyCode;
                }
                if (key == 13) {
                    _self.submitForm('ruleForm');
                }
            }
        }
    }
</script>

